<template>
	<view class="app-container">
		<view class="me-container">
			<div class="userinfo">
				<div>
					<image src="@/static/logo.png" mode=""></image>
					<div>
						<div class="username">{{ userData.nickName }}</div>
						<div class="usertel">{{ userData.phone }}</div>
					</div>
				</div>
				<div>
					<navigator url="/pages/edituserinfo/edituserinfo">
						<u-icon name="edit-pen" color="#AFAFAF"></u-icon>
					</navigator>
				</div>
			</div>
			<u-cell-group :border="false" class="handle-container">
				<u-cell :border="false" icon="/static/icons/weixin.svg" isLink @click="setWechat">
					<view slot="title">
						<text>微信绑定</text>
					</view>
					<view slot="value">
						<text>{{ weChatValue }}</text>
					</view>
				</u-cell>
				<u-cell :border="false" icon="/static/icons/zhifubao.svg" isLink @click="setzhifubao">
					<view slot="title">
						<text>支付宝绑定</text>
					</view>
					<view slot="value">
						<text>{{ zhifubaoValue }}</text>
					</view>
				</u-cell>
				<u-cell :border="false" icon="/static/icons/bangdingyinhang.svg" isLink url="/pages/addbank/addbank">
					<view slot="title">
						<text>绑定银行卡</text>
					</view>
					<view slot="value">
						<text>{{ bankBranck }}</text>
					</view>
				</u-cell>
				<u-cell :border="false" icon="/static/icons/yaoqing.svg" isLink url="/pages/inviteuser/inviteuser">
					<view slot="title">
						<text>邀请新用户</text>
					</view>
				</u-cell>
				<u-cell :border="false" icon="/static/icons/jiancegengxin.svg" isLink @click="handleUpgrade()">
					<view slot="title">
						<text>{{ `检测版本更新(${version})` }}</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		<modal-popup></modal-popup>
		<u-modal :show="show" :content='"你的版本需要更新"' @confirm="handleUpload()" showCancelButton @cancel="cancel">
		</u-modal>
	</view>
</template>

<script>
	import {
		helperUrl
	} from '@/api/api.js'
	import ModalPopup from '@/components/ModalPopup/ModalPopup.vue'
	import {
		upgradeAdmin
	} from '@/api/api.js'
	export default {
		components: {
			ModalPopup
		},
		data() {
			return {
				versionCode: '',
				version: '',
				show: false,
				versionUrl: '',
				channel: '',
				weChatValue: '',
				zhifubaoValue: ''
			}
		},
		computed: {
			userData() {
				return this.$store.state.user
			},
			bankBranck() {
				let reg = /^(\d{4})\d+(\d{4})$/;
				return this.$store.state.user.bankPayment ? this.$store.state.user.bankPayment.bankNo.replace(reg,
					"$1 **** **** $2") : ''
			}
		},
		nHide() {
			this.$store.dispatch('changeShowAction', false)
		},
		mounted() {
			this.$store.dispatch('userInfo')
			//#ifdef APP
			plus.runtime.getProperty(plus.runtime.appid, (info) => {
				this.version = info.version
				this.versionCode = info.versionCode
			})
			//#endif

		},
		methods: {
			handleUpgrade: function() {
				//#ifdef APP
				upgradeAdmin({
					channel: 'starsmoon'
				}).then(res => {
					if (Number(res.data.versionCode) > Number(this.versionCode)) {
						this.versionUrl = res.data.versionUrl
						this.show = true
					}
				})
				//#endif
			},
			handleUpload: function() {
				//#ifdef APP
				void plus.runtime.openWeb(this.versionUrl);
				//#endif
			},
			cancel() {
				this.show = false
			},
			setWechat() {
				this.weChatValue = '123456'
			},
			setzhifubao() {
				this.zhifubaoValue = 'liu***@163.com'
			}
		},
	}
</script>

<style lang="scss">
	.me-container {
		.userinfo {
			display: flex;
			justify-content: space-between;
			flex-wrap: nowrap;
			margin-bottom: 24px;

			>div:first-child {
				display: flex;
				justify-content: flex-start;

				image {
					width: 72px;
					height: 72px;
					border-radius: 50%;
					margin-right: 14px;
				}

				>div {
					padding-top: 14px;
				}

				.username {
					font-size: 18px;
					line-height: 25px;
				}

				.usertel {
					font-size: 14px;
					line-height: 20px;
				}
			}

			>div:last-child {
				box-sizing: border-box;
				padding-top: 28px;
			}
		}

		.handle-container {
			.u-cell {
				margin-bottom: 16px;
				background-color: #fff;
				line-height: 32px;
			}
		}
	}
</style>
